<template>
	<view class="scene-container">
		<view class="u-demo-block__content bg-white">
			<u-tabs :list="spaceList" @click="tabSelect">
				<view
					slot="right"
					style="padding-left: 4px;"
					@tap="$u.toast('开发中.....')"
				>
				<text class="baseicon-add text-blue more-nav"/>
				</view>
			</u-tabs>
		</view>
		<view class="nav-list" style="font-size: 14px; padding-top: 20rpx;">
			<view hover-class="none" class="scene-row bg-white" 
			  v-for="(item,index) in sceneList" :key="index">
				<text class="sc-text" :class="item.isCollect?'baseicon-collect text-grey':'baseicon-no-collect'" @tap="sceneCollectChang(item,index)"/>
				<text class="baseicon-rightarrow right-text"  @tap="getSceneInfo"/>
				<view class="cuIcon-repair kz-text"  @tap="sceneHandle">
				</view>
				<view class="cj-text">灯光全开</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      spaceList: [{
					name: "场景",
					id:1
				},
				{
					name: "自动化",
					id:1
				}
			],
			sceneList: [{},{},{}],
			TabCur:0,
	      scrollLeft: 0
	    }
	  },
	  methods: {
			tabSelect(e) {
				this.spaceDeviceList=e.name
				console.log(e)
			}
	  }
	}
</script>

<style>
	.more-nav{
		font-size: 80rpx;
		margin-right: 15rpx;
	}
	.sc-text{
		left: 15rpx;
	}
	.right-text{
		float: right;
	}
	.kz-text{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		font-size: 150%;
	}
	.cj-text{
		font-weight: 600;
		text-align: center;
		position: relative;
		bottom: 40rpx;
	}
	.scene-row{
		padding: 20rpx;
		border-radius: 12rpx;
		width: 45%;
		height: 200rpx;
		margin: 0 2.5% 20rpx;
		position: relative;
		z-index: 1;
	}
	.scene-row text {
		position: absolute;
		right: 20upx;
		top: 10upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}
</style>
